<template>
  <div class="container" ref="container" id="container">
    <div class="image">
      <img src="@/assets/image/image1.png" alt="" />
    </div>
    <div class="contentText">
      <div class="logo">
        <img src="@/assets/image/logo2.png" alt="" />
      </div>
      <div class="logo2">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in data.banner" :key="index">
            <img :src="imgUrl + item.banner" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="news">
        <img src="@/assets/image/image3.png" alt="" />
        <div class="text">
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item v-for="item in data.announce" :key="item.id">{{
                item.content
              }}</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
      </div>
      <div class="content" v-for="(item, index) in data.info" :key="index">
        <img
          :src="item.image"
          alt=""
          :style="index == 0 ? 'height: 25px' : ''"
        />
        <div class="title">{{ item.title }}</div>
        <div class="experience" @click="bindClickExperience(item.experience)">
          <div class="conduct" v-if="item.experience.type">进行中</div>
          <div class="time">
            {{ `${item.experience.startTime}-${item.experience.endTime}` }}
          </div>
        </div>
        <div class="formal" @click="bindClickFormal(item.formal)">
          <div class="conduct" v-if="item.formal.type">进行中</div>
          <div class="time">
            {{ `${item.formal.startTime}-${item.formal.endTime}` }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="@/assets/image/login1.png" alt="" />
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  ref,
  nextTick,
  reactive,
  getCurrentInstance,
} from "vue";
import { useRouter } from "vue-router";
import image1 from "@/assets/image/image4.png";
import image2 from "@/assets/image/image5.png";
import image3 from "@/assets/image/image6.png";
import {
  getBannerList,
  imgUrl,
  getAnnounceList,
  getActiveList,
  buyStatus,
} from "@/api/http.js";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const data = reactive({
      info: [
        {
          title: "上午场",
          experience: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          formal: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          image: image1,
        },
        {
          title: "下午场",
          experience: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          formal: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          image: image2,
        },
        {
          title: "晚间场",
          experience: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          formal: {
            type: false,
            startTime: "10:30",
            endTime: "11:30",
          },
          image: image3,
        },
      ],
      banner: [],
      announce: [],
    });
    const container = ref(null);
    const getHeight = async () => {
      await nextTick(() => {
        setTimeout(() => {
          const contentText = document.querySelector(".contentText");
          const footer = document.querySelector(".footer");
          container.value.style.height =
            contentText.offsetHeight + footer.offsetHeight + "px";
        }, 500);
      });
    };
    const bindClickExperience = async (item) => {
      const { msg, code } = await buyStatus({ activeType: item.id });
      if (code != "200") {
        proxy.$toast.fail(msg);
        return;
      }
      if (JSON.parse(localStorage.getItem("info")).remain <= 0)
        return proxy.$toast.fail("当前体验次数不足,请您前往正式区");
      console.log("体验区跳转---", item);
      item = JSON.stringify(item);
      router.push({
        path: "/home/goods",
        query: {
          item,
          type: 0,
        },
      });
    };
    const bindClickFormal = async (item) => {
      const { msg, code } = await buyStatus({ activeType: item.id });
      if (code != "200") {
        proxy.$toast.fail(msg);
        return;
      }
      console.log("正式区跳转---", item);
      item = JSON.stringify(item);
      router.push({
        path: "/home/goods",
        query: {
          item,
          type: 1,
        },
      });
    };
    const getInfo = async () => {
      const list = await getBannerList();
      data.banner = list.data;
      const announce = await getAnnounceList();
      data.announce = announce.data;
      const activeList = await getActiveList();

      let myIndex;
      const date = new Date();
      const getHours = date.getHours();
      const getMinutes = date.getMinutes();
      const getSeconds = date.getSeconds();
      const nowDate = (getHours * 60 + getMinutes) * 60 + getSeconds;
      activeList.data.map((item, index) => {
        if (!(index % 2)) {
          index == 0 ? (myIndex = index) : (myIndex = index / 2);
          console.log("myIndex---", myIndex);
          // 体验
          data.info[myIndex].experience.startTime = item.startTime;
          data.info[myIndex].experience.start = setDate(item.startTime);
          data.info[myIndex].experience.endTime = item.endTime;
          data.info[myIndex].experience.end = setDate(item.endTime);
          data.info[myIndex].experience.id = item.id;
          if (
            data.info[myIndex].experience.start < nowDate &&
            data.info[myIndex].experience.end > nowDate
          )
            data.info[myIndex].experience.type = true;
        } else {
          console.log("myIndex---", myIndex);
          // 正式
          data.info[myIndex].formal.startTime = item.startTime;
          data.info[myIndex].formal.start = setDate(item.startTime);
          data.info[myIndex].formal.endTime = item.endTime;
          data.info[myIndex].formal.end = setDate(item.endTime);
          data.info[myIndex].formal.id = item.id;
          if (
            data.info[myIndex].formal.start < nowDate &&
            data.info[myIndex].formal.end > nowDate
          )
            data.info[myIndex].formal.type = true;
        }
      });
      console.log("data---", data);
    };
    const setDate = (date) => {
      let list = date.split(":");
      return (list[0] * 60 + Number(list[1])) * 60;
    };
    onMounted(() => {
      getInfo();
      getHeight();
    });
    return {
      container,
      data,
      bindClickExperience,
      bindClickFormal,
      imgUrl,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
  background-image: url(../../assets/image/bj.jpg);
  color: var(--textColor);

  .image {
    padding-top: 66px;
    img {
      width: 100%;
    }
  }

  .contentText {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0;

    .logo {
      background-color: #fff;
      width: 100%;
      padding: 10px 0;

      img {
        display: block;
        width: 70%;
        margin: 0 auto;
      }
    }

    .logo2 {
      width: 100%;
      padding: 10px 4% 0;

      .my-swipe {
        z-index: 99;
        width: 100%;
        height: 200px;

        img {
          width: 100%;
        }
      }
    }

    .news {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 3%;
      margin: 10px 0 30px;

      img {
        height: 100%;
      }

      .text {
        // margin-left: 30px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        font-size: 0.9rem;
        width: 100%;

        .van-notice-bar {
          background-color: transparent;
          color: var(--textColor);
        }

        .notice-swipe {
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .content {
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        height: 50px;
      }
      .title {
        margin-top: 10px;
        font-size: 1.12rem;
        font-family: PingFang SC;
        font-weight: bold;
      }
      .experience {
        width: 100%;
        height: 120px;
        margin-top: 10px;
        background-image: url(../../assets/image/index.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        position: relative;
      }
      .formal {
        width: 100%;
        height: 120px;
        margin-top: 10px;
        background-image: url(../../assets/image/index2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        position: relative;
      }
      .conduct {
        color: #e4eaf5;
        background-color: #c3ab84;
        font-size: 0.62rem;
        padding: 7px 10px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        position: absolute;
        right: 15%;
      }
      .time {
        color: #e4eaf5;
        font-size: 0.68rem;
        padding: 7px 10px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0%);
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    img {
      width: 100%;
    }
  }
}
</style>
